<template>
  <view class="content">
    <!-- @change="change"
    @click="click" -->
    <topLunBo></topLunBo>
    <userMessage></userMessage>
    <view class="msg_list">
      <view class="msg_item" v-for="(item, index) in msgList"
        :style="{ 'background': `#${(Math.random() * 0xffffff << 0).toString(16)}` }">
        <view class="msg_title">{{ item.title }}</view>
        <view class="msg_content">{{ item.content }}</view>
      </view>
    </view>
    <view class="tabs">
      <up-tabs :list="tabList" @click="click" lineWidth="40" lineColor="#32b4aa" :activeStyle="{
        color: '#fff',
        transform: 'scale(1.02)',
        fontSize: '32rpx'
      }" :inactiveStyle="{
          color: '#ddd',
          transform: 'scale(1)',
          fontSize: '32rpx'
        }" itemStyle="padding-left: 22px; padding-right: 22px; height: 34px;">
        
      </up-tabs>
      <view class="tabs_list">
        <view class="tabs_item" v-for="(item, index) in tabList[tabsIndex].list" :key="index">
          <view class="tabs_image">
            <view class="tags_top" v-show="tabsIndex === 0">AI图片</view>
            <view class="tags_bottom" v-show="tabsIndex === 1">{{item.content}}</view>
            <image :src="item.image" mode="aspectFill"></image>
          </view>
          <view class="tabs_title" v-if="tabsIndex === 0">{{item.title}}</view>
          <view class="tabs_user" v-else>
            <view class="tabs_user_flex">
              <image class="tabs_user_avatar" :src="item.user.avatar"></image>
              <image class="tabs_user_level" src="/static/icon/vip.png"></image>
              <view class="tabs_user_name">{{item.user.name}}</view>
            </view>
            <view class="tabs_user_like">
              <image src="/static/icon/like.png" v-show="!item.likeStatus" @click="likeWork(item)"></image>
              <image src="/static/icon/like_active.png" v-show="item.likeStatus"></image>
              {{ item.like }}
            </view>
          </view>

        </view>
      </view>
    </view>
  </view>
  <fixedRightTools/>
</template>

<script setup>
import fixedRightTools from '@/components/fixedRightTools.vue'
import userMessage from '@/components/userMessage.vue'
import topLunBo from '@/components/topLunBo.vue'
import { reactive,ref, computed } from 'vue';


// 功能区
const msgList = [
  {
    title: 'AI照片后期',
    content: '秒变写真大片',
  },
  {
    title: '人工精修写真',
    content: '让老照片焕然一新',
  },
  {
    title: 'AI黑白照片上色',
    content: '让老照片焕然一新',
  },
  {
    title: 'AI卡通头像',
    content: '描边写真大片',
    // height: 180,
  },
  {
    title: 'AI照片修复',
    content: '照片放大变清晰',
  },
  {
    title: 'AI人像转动漫',
    content: '秒变写真大片',
  }
]


// 创建响应式数据
// tabs定义方法  
function click(item) {
  // console.log('item', item);
  tabsIndex.value = item.index;
}
const tabsIndex = ref(0);
// tabs内容list
const tabList = reactive([
  {
    name: '热门推荐',
    list: [
      {
        title: 'AI照片后期',
        image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        content: '秒变写真大片',
      },
      {
        title: 'AI黑白照片上色',
        image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        content: '让老照片焕然一新',
      },
      {
        title: 'AI卡通头像',
        image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
        content: '描边写真大片',
      },
      {
        title: 'AI照片修复',
        image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        content: '照片放大变清晰',
      },
    ]
  },
  {
    name: '用户分享',
    list: [
      {
        title: 'AI照片后qw期',
        image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        content: '秒变写真大片',
        user: {
          name: '张三',
          avatar: 'https://p1.music.126.net/wSMfGvFzOAYRU_yVIfquAA==/2946691248081599.jpg?param=300y300',
        },
        like: 123,
      },
      {
        title: 'AI黑白照片上色',
        image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        content: '让老照片焕然一新',
        user: {
          name:'李四',
          avatar: 'https://p1.music.126.net/wSMfGvFzOAYRU_yVIfquAA==/2946691248081599.jpg?param=300y300',
        },
        like: 3333,
      },
    ]
  },

]
)

// 点赞作品
const likeWork = (item) => {
  if(item.likeStatus) return
  item.likeStatus = true;
  item.like += 1;
}
</script>

<style>
.content {
  padding-bottom: 10rpx;
}

.top_image {
  width: 100%;
  height: 300rpx;
}



.msg_list {
  width: 96.5%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .msg_item {
    /* float: left; */
    padding: 20rpx;
    margin: 5rpx 5rpx;
    border-radius: 10rpx;
    width: calc(50% - 50rpx);
    background: #333;
    height: 80px;

    .msg_content {
      font-size: 22rpx;
      padding: 4rpx 0;
    }
  }
}

.tabs_list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 96%;
  margin: 10rpx auto;
  margin-top: 20rpx;
  .tabs_item {
    width: calc(50% - 10rpx);
    margin: 0 5rpx;
    margin-bottom: 60rpx;
    height: 400rpx;
    position: relative;
    .tabs_image {
      background: red;
      border-radius: 10rpx;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      position: relative;
      .tags_bottom{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 9;
        font-size: 22rpx;
        background: #000000b0;
        padding: 12rpx 0;
        width: 100%;
        text-align: center;
      }
    }
    .tags_top{
      position: absolute;
      top: 0;
      right: 0;
      z-index: 9;
      font-size: 20rpx;
      background: #333;
      padding: 8rpx 25rpx;
    }

    .tabs_title {
      width: 100%;
      text-align: center;
      font-size: 25rpx;
      margin: 4rpx 0;
    }
    .tabs_user{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10rpx;
      padding: 0 10rpx;
      .tabs_user_flex{
        display: flex;
        align-items: center;
        position: relative;
        .tabs_user_avatar{
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          margin-right: 10rpx;
        }
        .tabs_user_level{
          position: absolute;
          bottom: -8rpx;
          left: 26rpx;
          width: 28rpx;
          height: 28rpx;
        }
        .tabs_user_name{
          color: #cbcbcb;
          font-size: 24rpx;
          margin-left: 6rpx;
          transform: translateY(4rpx);
        }
       }
      .tabs_user_like{
         color: #cbcbcb;
         font-size: 20rpx;
         display: flex;
         align-items: center;
         image{
           width: 30rpx;
           height: 30rpx;
           margin-right: 4rpx;
         }
      }
    }

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
